$(function () {
  initArtCateList();
  let layer = layui.layer;
  let form = layui.form;
  function initArtCateList() {
    axios({
      method: "GET",
      url: "/my/article/cates",
    }).then((res) => {
      // console.log(res.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      let arr = [];
      let index = 0;
      res.data.data.forEach((ele) => {
        index++;
        arr.push(`
       <tr>
             <td>${index}</td>
             <td>${ele.name}</td>
             <td>${ele.alias}</td>
             <td>
               <button data-id='${ele.Id}' type="button" class="btn-edit layui-btn layui-btn-xs">
               编辑
               </button>
               <button
                 data-id='${ele.Id}' 
                 type="button"
                 class="btn-del layui-btn layui-btn-xs layui-btn-danger"
               >
                 删除
               </button>
             </td>
       </tr>      
              `);
      });
      $("tbody").empty().html(arr.join(""));
    });
  }

  let indexAdd = null;

  // 需求2 点击添加显示对话框
  $("#btnAdd").on("click", function () {
    indexAdd = layer.open({
      type: 1,
      title: "添加文章分类",
      area: ["500px", "300px"],
      content: `
     <form class="layui-form" id="formAdd">
       <div class="layui-form-item">
         <label class="layui-form-label">分类名称 </label>
         <div class="layui-input-block">
           <input
             type="text"
             name="name"
             required
             lay-verify="required"
             placeholder="请输入分类名称
         "
             autocomplete="off"
             class="layui-input"
           />
         </div>
       </div>
       <div class="layui-form-item">
         <label class="layui-form-label">分类别名</label>
         <div class="layui-input-block">
           <input
             type="text"
             name="alias"
             required
             lay-verify="required"
             placeholder="请输入分类别名"
             autocomplete="off"
             class="layui-input"
           />
         </div>
       </div>
       <div class="layui-form-item">
       <div class="layui-input-block">
         <button class="layui-btn" lay-submit lay-filter="formDemo">
         添加
         </button>
         <button type="reset" class="layui-btn layui-btn-primary">重置</button>
         </div>
       </div>
    </form>
      
               `,
    });
  });

  // 需求3，添加文章分类(事件委托)
  $("body").on("submit", "#formAdd", function (e) {
    e.preventDefault();
    axios({
      method: "POST",
      url: "/my/article/addcates",
      data: $(this).serialize(),
    }).then((res) => {
      // console.log(res.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      // 使用layui 就不需要手动清空了
      $("#formAdd")[0].reset();
      // layui 关闭弹出层
      layer.msg("恭喜您，添加文章分类成功！");
      layer.close(indexAdd);
      // $(".layui-layer-setwin a ").click();
      initArtCateList();
    });
  });

  // 需求4 ，点击按钮，展示对话框
  let indexEdit = null;
  $("tbody").on("click", ".btn-edit", function () {
    indexEdit = layer.open({
      type: 1,
      title: "添加文章分类",
      area: ["500px", "300px"],
      content: `
       <form  lay-filter="formEdit"  class="layui-form" id="formEdit">
       <input type='hidden' name='Id'>
         <div class="layui-form-item">
           <label class="layui-form-label">分类名称 </label>
           <div class="layui-input-block">
             <input
               type="text"
               name="name"
               required
               lay-verify="required"
               placeholder="请输入分类名称
           "
               autocomplete="off"
               class="layui-input"
             />
           </div>
         </div>
         <div class="layui-form-item">
           <label class="layui-form-label">分类别名</label>
           <div class="layui-input-block">
             <input
               type="text"
               name="alias"
               required
               lay-verify="required"
               placeholder="请输入分类别名"
               autocomplete="off"
               class="layui-input"
             />
           </div>
         </div>
         <div class="layui-form-item">
         <div class="layui-input-block">
           <button class="layui-btn" lay-submit lay-filter="formDemo">
           修改
           </button>
           <button type="reset" class="layui-btn layui-btn-primary">重置</button>
           </div>
         </div>
      </form>
    
             `,
    });
    let id = $(this).attr("data-id");
    axios({
      method: "GET",
      // 此处的 id 为动态参数，可以改变， 路径中的：必须省略
      url: `/my/article/cates/` + id,
    }).then(function (res) {
      // console.log(res.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      form.val("formEdit", res.data.data);
    });
  });

  // 需求5 修改文章
  $("body").on("submit", "#formEdit", function (e) {
    e.preventDefault();
    axios({
      method: "POST",
      url: "/my/article/updatecate",
      data: $(this).serialize(),
    }).then((res) => {
      // console.log(res.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      // layui 关闭弹出层
      layer.msg("恭喜您，修改文章分类成功！");
      layer.close(indexEdit);
      // $(".layui-layer-setwin a ").click();
      initArtCateList();
    });
  });

  // 需求5 删除文章列别
  $("tbody").on("click", ".btn-del", function () {
    // 获取id 在弹窗之外
    let id = $(this).attr("data-id");
    layer.confirm("确认删除吗?", { icon: 3, title: "提示" }, function (index) {
      axios({
        method: "GET",
        url: "/my/article/deletecate/" + id,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.status !== 0) {
          return layer.msg(res.data.message);
        }
        layer.msg("恭喜您，删除文章分类成功！");
        initArtCateList();
      });

      layer.close(index);
    });
  });
});
